<template>
  <div class="csign-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">健康知识管理</h2>
      <div class="breadcrumb">首页 / 知识管理 / 健康知识</div>
    </div>

    <!-- 统计卡片区域 -->
    <div class="stats-cards">
      <div class="stat-card stat-card-primary">
        <div class="stat-icon">📚</div>
        <div class="stat-content">
          <div class="stat-value">{{ totalKnowledge }}</div>
          <div class="stat-label">知识总量</div>
        </div>
      </div>
      <div class="stat-card stat-card-success">
        <div class="stat-icon">✅</div>
        <div class="stat-content">
          <div class="stat-value">{{ publishedKnowledge }}</div>
          <div class="stat-label">已发布</div>
        </div>
      </div>
      <div class="stat-card stat-card-warning">
        <div class="stat-icon">⏳</div>
        <div class="stat-content">
          <div class="stat-value">{{ unpublishedKnowledge }}</div>
          <div class="stat-label">未发布</div>
        </div>
      </div>
      <div class="stat-card stat-card-info">
        <div class="stat-icon">👥</div>
        <div class="stat-content">
          <div class="stat-value">{{ publicKnowledge }}</div>
          <div class="stat-label">公开知识</div>
        </div>
      </div>
    </div>

    <!-- 搜索和操作按钮区域 -->
    <div class="search-action-wrapper">
      <!-- 搜索区域 -->
      <div class="search-container">
        <el-card class="search-card" shadow="hover">
          <el-form :inline="true" class="search-form">
            <el-form-item label="主题内容" class="search-item">
              <label class="search-label">主题内容</label>
              <el-input 
                v-model="page.theme" 
                placeholder="请输入" 
                clearable 
                size="small" 
                class="input-search"
                prefix-icon="el-icon-search"
              />
            </el-form-item>

            <el-form-item label="适合病种" class="search-item">
              <label class="search-label">适合病种</label>
              <el-select 
                v-model="page.entity" 
                placeholder="全部" 
                size="small" 
                class="select-search"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="高血压" value="高血压" />
                <el-option label="糖尿病" value="糖尿病" />
                <el-option label="冠心病" value="冠心病" />
                <el-option label="高血脂" value="高血脂" />
              </el-select>
            </el-form-item>

            <el-form-item label="状态" class="search-item">
              <label class="search-label">状态</label>
              <el-select 
                v-model="page.knowledgeStatus" 
                placeholder="请选择" 
                size="small" 
                class="select-search"
                clearable
              >
                <el-option label="全部" value="" />
                <el-option label="未发布" value="未发布" />
                <el-option label="已发布" value="已发布" />
              </el-select>
            </el-form-item>

            <el-form-item class="search-actions">
              <el-button type="primary" size="small" @click="handleSearch" class="search-btn">
                <el-icon>
                  <Search />
                </el-icon> 查询
              </el-button>
              <el-button size="small" @click="resetSearch" class="reset-btn">
                <el-icon>
                  <RefreshRight />
                </el-icon> 重置
              </el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>

      <!-- 操作按钮 -->
      <div class="action-container">
        <div class="batch-operations">
          <el-checkbox v-model="selectAll" @change="handleSelectAll" class="select-all-checkbox">全选</el-checkbox>
          <el-button 
            type="success" 
            size="small" 
            @click="batchPublish" 
            class="batch-btn"
            :disabled="selectedRows.length === 0"
          >
            <el-icon>
              <Check />
            </el-icon> 批量发布
          </el-button>
        </div>
        <el-button type="primary" size="small" @click="showCreateDialog" class="create-btn">
          <el-icon>
            <Plus />
          </el-icon> 新建知识
        </el-button>
      </div>
    </div>

    <!-- 表格区域 -->
    <div class="table-container">
      <el-card class="data-card" shadow="hover">
        <div class="table-header">
          <h3 class="table-title">知识列表</h3>
          <div class="table-stats">共 {{ page.totalCount }} 条记录</div>
        </div>
        
        <el-table 
          :data="tableData" 
          stripe 
          border 
          class="data-table"
          :header-cell-style="headerCellStyle"
          :cell-style="cellStyle" 
          v-loading="loading"
          :loading-text="'加载中...'"
          @selection-change="handleSelectionChange"
          row-key="knowledgeId"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column type="index" label="序号" width="60" align="center" />
          <el-table-column prop="theme" label="主题" min-width="280" show-overflow-tooltip>
            <template #default="scope">
              <div class="theme-cell">
                <span class="theme-text">{{ scope.row.theme }}</span>
                <el-tag 
                  v-if="!scope.row.knowledgeopen" 
                  size="small" 
                  type="danger" 
                  class="private-tag"
                  effect="dark"
                >
                  私密
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="entity" label="适用病种" width="120" align="center">
            <template #default="scope">
              <el-tag 
                class="entity-tag" 
                size="small" 
                :type="getEntityTagType(scope.row.entity)"
                effect="light"
              >
                {{ scope.row.entity }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="knowledgeTime" label="创建日期" width="180" align="center" />
          <el-table-column prop="knowledgeopen" label="是否公开" width="100" align="center">
             <template #default="scoped">
              <el-tag 
                v-if="scoped.row.knowledgeopen == 1" 
                type="success" 
                size="small" 
                class="status-tag"
                effect="light"
              >
                是
              </el-tag>
              <el-tag 
                v-else 
                type="info" 
                size="small" 
                class="status-tag"
                effect="light"
              >
                否
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="knowledgeStatus" label="状态" width="100" align="center">
            <template #default="scoped">
              <el-tag 
                v-if="scoped.row.knowledgeStatus" 
                type="primary" 
                size="small" 
                class="status-tag"
                effect="light"
              >
                已发布
              </el-tag>
              <el-tag 
                v-else 
                type="warning" 
                size="small" 
                class="status-tag"
                effect="light"
              >
                未发布
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template #default="{ row }">
              <el-button 
                type="primary" 
                link 
                size="small" 
                @click="handleEdit(row)"
                class="action-link-btn"
                :title="'编辑: ' + row.theme"
              >
                <el-icon><Edit /></el-icon> 编辑
              </el-button>
              <el-button 
                type="success" 
                link 
                size="small" 
                @click="handlePublish(row)"
                :disabled="row.knowledgeStatus"
                class="action-link-btn"
                :title="row.knowledgeStatus ? '已发布' : '发布知识'"
              >
                <el-icon><Check /></el-icon> {{ row.knowledgeStatus ? '已发布' : '发布' }}
              </el-button>
              <el-button 
                type="danger" 
                link 
                size="small" 
                @click="handleDelete(row)"
                class="action-link-btn"
                :title="'删除: ' + row.theme"
              >
                <el-icon><Delete /></el-icon> 删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <div class="pagination-info">
            显示 {{ (page.pageIndex - 1) * page.pageSize + 1 }} - 
            {{ Math.min(page.pageIndex * page.pageSize, page.totalCount) }} 条，共 {{ page.totalCount }} 条
          </div>
          <el-pagination 
            v-model:current-page="page.pageIndex" 
            v-model:page-size="page.pageSize"
            :page-sizes="[5, 10, 20, 50]" 
            :background="true" 
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.totalCount" 
            @size-change="handleSizeChange" 
            @current-change="handleCurrentChange" 
            class="pagination"
          />
        </div>
      </el-card>
    </div>

    <!-- 新建/编辑弹窗 -->
    <el-dialog 
      v-model="dialogVisible" 
      :title="isEditing ? '编辑知识' : '新建知识'" 
      width="800px" 
      :before-close="handleClose" 
      destroy-on-close
      class="custom-dialog"
    >
      <el-form ref="formRef" :model="formData" label-width="100px" :rules="rules" class="edit-form">
        <el-form-item label="主题:" prop="theme">
          <el-input 
            v-model="formData.theme" 
            placeholder="请输入主题" 
            clearable 
            class="edit-input"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>

        <el-form-item label="适用病种:" prop="entity">
          <el-select v-model="formData.entity" placeholder="请选择适用病种" class="edit-select">
            <el-option label="高血压" value="高血压" />
            <el-option label="糖尿病" value="糖尿病" />
            <el-option label="冠心病" value="冠心病" />
            <el-option label="高血脂" value="高血脂" />
            <el-option label="其他" value="其他" />
          </el-select>
        </el-form-item>

        <el-form-item label="是否公开:" prop="knowledgeopen">
          <el-switch 
            v-model="formData.knowledgeopen" 
            class="status-switch"
            active-text="公开"
            inactive-text="私密"
            inline-prompt
          />
        </el-form-item>

        <el-form-item label="主题内容:" prop="upd">
          <el-input 
            v-model="formData.upd" 
            type="textarea" 
            :rows="12" 
            placeholder="请输入详细内容..." 
            resize="vertical" 
            class="content-textarea"
            maxlength="5000"
            show-word-limit
          />
          <div class="content-tips">
            <i class="el-icon-info"></i> 支持HTML格式，建议添加适当的标题和段落分隔
          </div>
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose" class="cancel-btn">取消</el-button>
          <el-button 
            type="primary" 
            @click="handleSaveAndPublish" 
            class="save-publish-btn"
          >
            保存并发布
          </el-button>
          <el-button 
            type="success" 
            @click="handleSave" 
            class="save-btn"
          >
            仅保存
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 确认删除弹窗 -->
    <el-dialog 
      v-model="deleteDialogVisible" 
      title="确认删除" 
      width="400px" 
      :before-close="handleCloseDelete"
      class="custom-dialog delete-dialog"
    >
      <div class="delete-confirm">
        <div class="delete-icon">⚠️</div>
        <p>确定要删除知识 "{{ deleteItem.theme || '' }}" 吗？</p>
        <p class="delete-warning">此操作不可恢复！</p>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleCloseDelete" class="cancel-btn">取消</el-button>
          <el-button type="danger" @click="confirmDelete" class="delete-btn">确认删除</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 加载遮罩 -->
    <el-loading 
      v-if="loading" 
      
      text="正在处理数据..." 
      class="custom-loading"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { 
  Search, 
  Plus, 
  Check, 
  Edit, 
  Delete, 
  RefreshRight 
} from '@element-plus/icons-vue'
import axios from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'

// 表格数据
const tableData = ref([])

// 页面加载状态
const loading = ref(false)

// 选中的行数据
const selectedRows = ref([])
const selectAll = ref(false)

// 页面数据
const page = reactive({
  totalCount: 0,
  totalPage: 0,
  pageIndex: 1,
  pageSize: 10,
  theme: '',
  entity: '',
  knowledgeStatus: ''
})

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 统计数据计算属性
const totalKnowledge = computed(() => tableData.value.length)
const publishedKnowledge = computed(() => tableData.value.filter(item => item.knowledgeStatus).length)
const unpublishedKnowledge = computed(() => tableData.value.filter(item => !item.knowledgeStatus).length)
const publicKnowledge = computed(() => tableData.value.filter(item => item.knowledgeopen === 1).length)

// 表格样式配置
const headerCellStyle = {
  background: 'linear-gradient(135deg, var(--primary-light), #f0f9ff)',
  color: 'var(--text-primary)',
  fontSize: '14px',
  fontWeight: '600',
  padding: '12px 8px',
  borderBottom: '2px solid var(--primary-color)'
}

const cellStyle = {
  padding: '12px 8px',
  fontSize: '14px',
  transition: 'background-color 0.2s ease'
}

// 获取病种标签类型
const getEntityTagType = (entity) => {
  const typeMap = {
    '高血压': 'danger',
    '糖尿病': 'warning',
    '冠心病': 'primary',
    '高血脂': 'info',
    '其他': 'success'
  }
  return typeMap[entity] || 'info'
}

// 获取数据列表
const list = () => {
  loading.value = true
  axios.get("http://localhost:5108/api/Manager/KnowledgeShow", { params: page }).then(res => {
    tableData.value = res.data.data.data || [];
    page.totalCount = res.data.data.totalCount || 0;
    page.totalPage = res.data.data.totalPage || 0;
    pagination.total = page.totalCount
    // 重置选择状态
    selectedRows.value = []
    selectAll.value = false
  }).catch(error => {
    console.error('获取数据失败:', error)
    ElMessage.error('获取数据失败，请稍后重试')
  }).finally(() => {
    loading.value = false
  })
}

// 分页变化处理
const handleSizeChange = (pageSize) => {
  page.pageSize = pageSize
  page.pageIndex = 1
  pagination.pageSize = pageSize
  list();
}

const handleCurrentChange = (pageIndex) => {
  page.pageIndex = pageIndex
  pagination.currentPage = pageIndex
  list();
}

// 选择行变化处理
const handleSelectionChange = (rows) => {
  selectedRows.value = rows
  selectAll.value = rows.length > 0 && rows.length === tableData.value.length
}

// 全选/取消全选
const handleSelectAll = (value) => {
  selectAll.value = value
  if (value) {
    selectedRows.value = [...tableData.value]
  } else {
    selectedRows.value = []
  }
}

// 组件挂载时加载数据
onMounted(() => {
  list();
})

// 弹窗相关
const dialogVisible = ref(false)
const deleteDialogVisible = ref(false)
const formRef = ref(null)
const isEditing = ref(false)
const currentEditingId = ref(null)
const deleteItem = reactive({ theme: '' })

const formData = reactive({
  theme: '',
  entity: '',
  knowledgeopen: 1, // 默认为公开
  knowledgeStatus: false,
  upd: ''
})

// 表单校验规则
const rules = {
  theme: [
    { required: true, message: '请输入主题', trigger: 'blur' },
    { min: 2, max: 100, message: '主题长度应在2-100个字符之间', trigger: 'blur' }
  ],
  entity: [{ required: true, message: '请选择适用病种', trigger: 'change' }],
  upd: [
    { required: true, message: '请输入主题内容', trigger: 'blur' },
    { min: 10, message: '内容至少需要10个字符', trigger: 'blur' }
  ]
}

// 显示新建弹窗
const showCreateDialog = () => {
  isEditing.value = false
  currentEditingId.value = null
  // 清空表单
  Object.assign(formData, {
    theme: '',
    entity: '',
    knowledgeopen: 1,
    knowledgeStatus: false,
    upd: ''
  })
  if (formRef.value) {
    formRef.value.resetFields()
  }
  dialogVisible.value = true
}

// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

// 保存数据
const handleSave = async () => {
  await saveData(false)
}

// 保存并发布
const handleSaveAndPublish = async () => {
  await saveData(true)
}

// 保存数据的通用方法
const saveData = async (publish = false) => {
  try {
    await formRef.value.validate()
    
    // 格式化时间
    const now = new Date()
    const formattedTime = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`
    formData.KnowledgeTime = formattedTime
    
    // 如果是保存并发布，设置状态为已发布
    if (publish) {
      formData.knowledgeStatus = true
    }

    // 发送保存请求
    loading.value = true
    const res = await axios.post("http://localhost:5203/api/Managment/AddKnowlege", formData)
    
    if (res.data.code === 200) {
      ElMessage.success(publish ? '保存并发布成功' : '保存成功')
      dialogVisible.value = false
      // 刷新数据列表
      list()
    } else {
      ElMessage.error(res.data.message || '保存失败')
    }
  } catch (err) {
    console.error('保存失败:', err)
    if (!err.response) {
      ElMessage.error('保存失败，请稍后重试')
    }
  } finally {
    loading.value = false
  }
}

// 编辑功能
const handleEdit = (row) => {
  isEditing.value = true
  currentEditingId.value = row.knowledgeId
  // 填充表单
  Object.assign(formData, {
    theme: row.theme || '',
    entity: row.entity || '',
    knowledgeopen: row.knowledgeopen,
    knowledgeStatus: row.knowledgeStatus,
    upd: row.upd || ''
  })
  dialogVisible.value = true
}

// 搜索功能
const handleSearch = () => {
  page.pageIndex = 1
  pagination.currentPage = 1
  list()
}

// 重置搜索
const resetSearch = () => {
  page.theme = ''
  page.entity = ''
  page.knowledgeStatus = ''
  handleSearch()
}

// 发布/取消发布功能
const handlePublish = async (row) => {
  try {
    const newStatus = !row.knowledgeStatus
    
    // 模拟API调用
    loading.value = true
    // 实际项目中应该调用API更新状态
    // await axios.put(`/api/knowledge/${row.knowledgeId}/status`, { status: newStatus })
    
    // 更新本地数据
    row.knowledgeStatus = newStatus
    ElMessage.success(newStatus ? '发布成功' : '取消发布成功')
  } catch (error) {
    console.error('状态更新失败:', error)
    ElMessage.error('操作失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 批量发布
const batchPublish = async () => {
  try {
    const unpublishedItems = selectedRows.value.filter(item => !item.knowledgeStatus)
    if (unpublishedItems.length === 0) {
      ElMessage.warning('请选择未发布的知识项')
      return
    }
    
    loading.value = true
    // 实际项目中应该调用批量API
    // await axios.post('/api/knowledge/batch-publish', { ids: unpublishedItems.map(item => item.knowledgeId) })
    
    // 更新本地数据
    unpublishedItems.forEach(item => {
      item.knowledgeStatus = true
    })
    
    ElMessage.success(`成功发布 ${unpublishedItems.length} 条知识`)
    selectedRows.value = []
    selectAll.value = false
  } catch (error) {
    console.error('批量发布失败:', error)
    ElMessage.error('批量发布失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 显示删除确认弹窗
const handleDelete = (row) => {
  Object.assign(deleteItem, {
    theme: row.theme || '',
    knowledgeId: row.knowledgeId
  })
  deleteDialogVisible.value = true
}

// 关闭删除弹窗
const handleCloseDelete = () => {
  deleteDialogVisible.value = false
  Object.assign(deleteItem, { theme: '', knowledgeId: null })
}

// 确认删除
const confirmDelete = async () => {
  try {
    loading.value = true
    // 实际项目中应该调用API删除
    // await axios.delete(`/api/knowledge/${deleteItem.knowledgeId}`)
    
    // 从本地数据中移除
    const index = tableData.value.findIndex(item => item.knowledgeId === deleteItem.knowledgeId)
    if (index > -1) {
      tableData.value.splice(index, 1)
    }
    
    ElMessage.success('删除成功')
    deleteDialogVisible.value = false
    page.totalCount--
    pagination.total--
  } catch (error) {
    console.error('删除失败:', error)
    ElMessage.error('删除失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 页码跳转
const goPage = ref(1)
const jumpToPage = () => {
  const max = Math.ceil(pagination.total / pagination.pageSize)
  if (goPage.value >= 1 && goPage.value <= max) {
    pagination.currentPage = goPage.value
    handleCurrentChange(goPage.value)
  }
}
</script>

<style scoped>
/* 现代医疗系统设计风格 - 专业医疗蓝主题 */

/* 页面主容器 */
.csign-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  background: linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
  min-height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面标题区域 - 玻璃拟态效果 */
.page-header {
  margin-bottom: 28px;
  padding: 20px 28px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.page-title {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #003d79;
}

.breadcrumb {
  font-size: 14px;
  color: #64748b;
}

/* 统计卡片区域 */
.stats-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-bottom: 28px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 12px;
  background: white;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 123, 255, 0.15);
  border-color: #007bff;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  opacity: 0.8;
}

.stat-card-primary::before {
  background: linear-gradient(to bottom, #007bff, #0056b3);
}

.stat-card-success::before {
  background: linear-gradient(to bottom, #28a745, #1e7e34);
}

.stat-card-warning::before {
  background: linear-gradient(to bottom, #ffc107, #e0a800);
}

.stat-card-info::before {
  background: linear-gradient(to bottom, #17a2b8, #138496);
}

.stat-icon {
  font-size: 32px;
  margin-right: 16px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #003d79;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

/* 搜索和操作按钮包装器 */
.search-action-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

/* 搜索区域 */
.search-container {
  width: 100%;
}

.search-card {
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 123, 255, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e2e8f0;
}

.search-card:hover {
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.15);
}

.search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
}

.search-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.search-label {
  font-weight: 500;
  color: #334155;
  white-space: nowrap;
}

.input-search {
  width: 220px;
}

.select-search {
  width: 160px;
}

.search-btn, .reset-btn {
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.search-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  color: white;
}

.search-btn:hover {
  background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.reset-btn {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  color: #6c757d;
}

.reset-btn:hover {
  background: #e9ecef;
  color: #495057;
  transform: translateY(-1px);
}

/* 操作按钮区域 */
.action-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.batch-operations {
  display: flex;
  align-items: center;
  gap: 12px;
}

.select-all-checkbox {
  font-size: 14px;
  color: var(--text-primary);
}

.create-btn,
.batch-btn {
  transition: var(--transition);
  font-weight: 500;
}

.create-btn {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  border: none;
  color: white;
}

.create-btn:hover {
  background: linear-gradient(135deg, #1e7e34 0%, #155724 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.batch-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 表格区域 */
.table-container {
  margin-bottom: 24px;
}

.data-card {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background-color: white;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.data-card:hover {
  box-shadow: 0 4px 20px rgba(0, 123, 255, 0.15);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e2e8f0;
  background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.table-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #003d79;
}

.table-stats {
  color: #64748b;
  font-size: 14px;
}

.data-table {
  border-radius: 0;
  margin-bottom: 0;
  width: 100%;
}

.data-table::before {
  height: 0;
}

/* 表格样式 */
:deep(.el-table) {
  border-radius: 12px;
  overflow: hidden;
}

:deep(.el-table__header) {
  background: linear-gradient(90deg, #007bff 0%, #0056b3 100%);
}

:deep(.el-table__header th) {
  background: transparent !important;
  color: white;
  font-weight: 600;
  border-bottom: none;
  padding: 12px 8px;
}

/* 表格行悬停效果 */
:deep(.el-table__row) {
  transition: all 0.2s ease;
}

:deep(.el-table__row:hover) {
  background-color: #f8f9fa !important;
}

/* 主题单元格 */
.theme-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.theme-text {
  flex: 1;
}

.private-tag {
  font-weight: 500;
}

/* 标签样式 */
.entity-tag,
.status-tag {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.entity-tag {
  color: white;
}

.sex-tag {
  font-size: 12px;
  padding: 2px 8px;
}

/* 操作按钮 */
.action-link-btn {
  margin: 0 4px;
  transition: all 0.2s ease;
}

.action-link-btn:hover {
  transform: translateY(-1px);
  color: var(--primary-dark);
  text-decoration: underline;
}

/* 分页区域 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  background-color: #fafafa;
}

.pagination-info {
  font-size: 14px;
  color: #64748b;
  margin-right: auto;
}

.pagination {
  display: flex;
  justify-content: flex-end;
}

/* 对话框样式 */
.custom-dialog {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

:deep(.custom-dialog .el-dialog__header) {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  padding: 20px 24px;
  border-bottom: none;
  margin: 0;
}

:deep(.custom-dialog .el-dialog__title) {
  font-size: 18px;
  font-weight: 600;
  color: white;
}

:deep(.custom-dialog .el-dialog__close) {
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

:deep(.custom-dialog .el-dialog__close:hover) {
  color: #a8c0ff;
  transform: rotate(90deg);
}

:deep(.custom-dialog .el-dialog__body) {
  padding: 24px;
  background-color: var(--card-background);
  max-height: 60vh;
  overflow-y: auto;
}

:deep(.custom-dialog .el-dialog__footer) {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  background-color: #fafafa;
}

/* 编辑表单 */
.edit-form {
  max-width: 100%;
}

.edit-input,
.edit-select {
  width: 100%;
  max-width: 600px;
  transition: all 0.3s ease;
  border-radius: 6px;
}

.edit-input:focus,
.edit-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.status-switch {
  --el-switch-on-color: var(--success-color);
  --el-switch-off-color: var(--warning-color);
}

.content-textarea {
  width: 100%;
  min-height: 300px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  transition: all 0.3s ease;
}

.content-textarea:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
}

.char-count,
.content-tips {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}

.content-tips {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 对话框按钮 */
.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn,
.save-btn,
.save-publish-btn,
.delete-btn {
  min-width: 80px;
  transition: var(--transition);
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 4px;
}

.cancel-btn:hover {
  background-color: var(--text-secondary);
  color: white;
  transform: translateY(-1px);
}

.save-btn {
  background: linear-gradient(135deg, #28a745 0%, #1e7e34 100%);
  border: none;
  color: white;
}

.save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.save-publish-btn {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  color: white;
}

.save-publish-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* 删除对话框样式 */
.delete-dialog :deep(.el-dialog__header) {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.delete-dialog :deep(.el-dialog__title) {
  color: white;
}

.delete-confirm {
  text-align: center;
  padding: 20px 0;
}

.delete-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.delete-warning {
  color: var(--danger-color);
  font-weight: 500;
  margin-top: 8px;
}

.delete-btn {
  background-color: var(--danger-color);
  border: none;
}

.delete-btn:hover {
  background-color: #c53030;
  transform: translateY(-1px);
}

/* 加载状态 */
.custom-loading :deep(.el-loading-spinner .path) {
  stroke: var(--primary-color) !important;
}

.custom-loading :deep(.el-loading-mask) {
  background-color: rgba(255, 255, 255, 0.85) !important;
}

.custom-loading :deep(.el-loading-spinner .el-loading-text) {
  color: var(--text-secondary);
}

/* 滚动条样式 */
:deep(.el-dialog__body::-webkit-scrollbar),
:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(.el-dialog__body::-webkit-scrollbar-track),
:deep(.el-table__body-wrapper::-webkit-scrollbar-track) {
  background: #f1f1f1;
  border-radius: 3px;
}

:deep(.el-dialog__body::-webkit-scrollbar-thumb),
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb) {
  background: #c1c1c1;
  border-radius: 3px;
  transition: background 0.2s;
}

:deep(.el-dialog__body::-webkit-scrollbar-thumb:hover),
:deep(.el-table__body-wrapper::-webkit-scrollbar-thumb:hover) {
  background: #a8a8a8;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .search-form {
    gap: 12px;
  }
  
  .search-input,
  .search-select {
    width: calc(50% - 12px);
    min-width: 150px;
  }
  
  .health-edu-list {
    padding: 16px;
  }
}

@media (max-width: 768px) {
  .health-edu-list {
    padding: 16px;
  }
  
  .stats-cards {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .search-action-wrapper {
    gap: 12px;
  }
  
  .action-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .batch-operations {
    justify-content: center;
  }
  
  .table-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .pagination-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .pagination {
    justify-content: center;
  }
  
  .dialog-footer {
    flex-direction: column;
  }
  
  :deep(.custom-dialog .el-dialog__body) {
    padding: 16px;
    max-height: 70vh;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  
  .search-input,
  .search-select {
    width: 100%;
  }
  
  .custom-dialog {
    width: 95% !important;
    margin: 10px;
  }
  
  :deep(.custom-dialog .el-dialog__header),
  :deep(.custom-dialog .el-dialog__body),
  .dialog-footer {
    padding: 16px;
  }
  
  .cancel-btn,
  .save-btn,
  .save-publish-btn,
  .delete-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .health-edu-list {
    padding: 12px;
  }
  
  .stats-cards {
    grid-template-columns: 1fr;
  }
  
  .search-form {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-input,
  .search-select {
    width: 100%;
  }
  
  :deep(.custom-dialog .el-dialog) {
    width: 90% !important;
    margin: 5vh auto;
  }
  
  .content-textarea {
    min-height: 200px;
  }
  
  .page-header h2 {
    font-size: 20px;
  }
  
  .table-title {
    font-size: 16px;
  }
  
  .create-btn {
    width: 100%;
    justify-content: center;
  }
}
</style>